// 实现使用函数调用组件的逻辑
import { createVNode, render } from 'vue'
import XtxMessage from './index.vue'

// 导出定义的函数
export function Message ({ type, text }) { // 使用时候传进来的对象参数
  // 封装逻辑
  // 1.组件，使用一个现成的导入进来的XtxMessage组件
  // 2.createVNode方法生成一个虚拟dom对象
  const vnode = createVNode(XtxMessage, { type, text }) // 第一个参数是组件，第二个参数是属性。
  // 手动创建一个用来挂载的真实dom节点 名为container吧
  const container = document.createElement('div')
  document.body.appendChild(container) // 添加到body的最后面
  // 3.render方法渲染为真实的dom节点
  render(vnode, container)
  // 4.1.5s后关闭弹窗
  setTimeout(() => {
    render(null, container)
  }, 1500)
}
